import { observer } from 'mobx-react-lite';
import Navbar from '@/components/Navbar';
import './index.less';
import houseStore from '@/stores/HouseStore';
import HouseImageList from '@/components/HouseImageList';
import ShowCollectFees from '@/components/ShowCollectFees';
import ShowHouseMessage from '@/components/ShowHouseMessage';
import { useEffect, useState } from 'react';
import { Image, Text, View } from '@tarojs/components';
import systemStore from '@/stores/SystemStore';
import arrowImg from '@/static/images/icon/arrow-right.png';
import { makePhoneCall, navigateTo } from '@tarojs/taro';
import ImageComp from '@/components/Image';
import PhoneImg from '@/static/images/icon/phone.png';
import ChatImg from '@/static/images/icon/chat.png';
import { HouseConstant } from '@/constant/HouseConstant';
import { TenantEntity } from '@/entities/TenantEntity';
import HouseLeaseBusiness from '@/business/HouseLeaseBusiness';
import chatStore from '@/stores/ChatStore';
import useChat from '@/hooks/useChat';

function LandlordLookHouse() {
  const { currentHouse } = houseStore;
  const { setChatReceiver } = chatStore;
  const { useLeaveChatSession } = useChat();
  const [currentTenant, setCurrentTenant] = useState<TenantEntity.ITenant>();
  const getCurrentTenant = async (houseId: number) => {
    const res: any = await HouseLeaseBusiness.getLeaseByHouseId(houseId);
    setCurrentTenant(res);
  };

  useLeaveChatSession();

  useEffect(() => {
    if (currentHouse.houseId) {
      getCurrentTenant(currentHouse.houseId);
    }
    return () => {
      houseStore.clearEditorCurrentHouse();
    };
  }, []);

  const lookHouseComment = () => {
    navigateTo({
      url: `/pages/houseAllComment/index?houseName=${currentHouse?.name}&houseId=${currentHouse?.houseId}`,
    });
  };

  const toChat = () => {
    setChatReceiver(currentTenant);
    navigateTo({
      url: `/pages/chatMessage/index`,
    });
  };

  /**
   * 打电话
   */
  const phoneTenant = () => {
    currentTenant?.phone &&
      makePhoneCall({
        phoneNumber: currentTenant.phone,
      });
  };

  return (
    <Navbar mode='back' bgColor='var(--mini-third)' title={currentHouse?.name}>
      <View
        className='landlord-look-container'
        style={{ height: systemStore.haveNavbarNotTabbarHeight }}
      >
        <HouseImageList imgList={JSON.parse(currentHouse?.houseImg || '[]')} />
        <View className='contact-tenant-wrap'>
          {currentHouse.status === HouseConstant.HouseToStatusMap.release ? (
            <View className='tenant-info'>
              <View className='flex items-center'>
                <ImageComp
                  src={currentTenant?.headImg}
                  className='tenant-head-img'
                />
                <Text className='tenant-text'>{currentTenant?.name}</Text>
              </View>
              <View>
                <Image
                  src={PhoneImg}
                  className='icon'
                  onClick={phoneTenant}
                  style={{ marginRight: '20px' }}
                />
                <Image
                  src={ChatImg}
                  className='icon'
                  mode='heightFix'
                  style={{ width: '37px' }}
                  onClick={() => toChat()}
                />
              </View>
            </View>
          ) : null}
          <View className='comment-enter' onClick={lookHouseComment}>
            <Text>查看房屋评论</Text>
            <Image src={arrowImg} className='arrow-icon' />
          </View>
        </View>
        <ShowCollectFees houses={currentHouse} />
        <ShowHouseMessage houses={currentHouse} />
      </View>
    </Navbar>
  );
}

export default observer(LandlordLookHouse);
